<template>
  <div class="login">
    <nav-bar>
      <img slot="left" src="~@/assets/img/common/back.svg" alt="" @click="detailBack">
      <div slot="center">
        商城登录注册
      </div>
    </nav-bar>
    <div class="content">
      <div class="input-group">
        <p class="input-container">
          <label>
            +86
            <svg t="1626419136288" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="7345" width="16" height="16">
              <path
                  d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
                  p-id="7346"></path>
            </svg>
          </label>
          <input type="number" placeholder="请输入手机号" v-model.trim="phone">
        </p>
        <p class="input-container verificationCode">
          <input type="number" placeholder="请输入收到的验证码" v-model.trim="code">
          <button v-if="second === 60" type="button" :disabled="errPhone" @click="sendCode">获取验证码</button>
          <span v-else>重新获取({{ second }}s)</span>
        </p>
      </div>
      <div class="button-group">
        <button type="button" :disabled="errPhone || errCode" @click="loginSubmit">登录</button>
        <button type="button" @click="inDevelopment">一键登录</button>
      </div>
      <div class="text-group">
        <p @click="inDevelopment">账号密码登录</p>
        <p @click="inDevelopment">手机快速注册</p>
      </div>
      <div class="other-group">
        <h4>其他登录方式</h4>
        <div class="icon-group">
          <svg @click="inDevelopment" t="1626418535003" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg"
               p-id="6226" width="35" height="35">
            <path
                d="M666.122449 909.061224c-10.44898 0-21.420408-1.044898-31.869388-2.612244-39.183673-4.702041-74.710204-23.510204-100.832653-53.289796-13.583673 5.22449-28.212245 5.22449-41.795918 0-21.420408 28.212245-61.64898 48.065306-108.669388 53.289796-66.35102 7.314286-138.44898-11.493878-144.718367-55.379592-5.22449-34.481633 37.093878-61.126531 81.502041-75.755102-25.6-28.212245-43.363265-63.738776-51.2-101.355102l-0.522449 0.522449c-25.077551 31.346939-41.795918 50.155102-61.126531 50.155102-2.089796 0-4.179592-0.522449-6.269388-1.044898-7.314286-2.612245-13.061224-8.881633-17.240816-18.808164-16.195918-34.481633-9.404082-100.310204 15.15102-150.465306 0 0 0-0.522449 0.522449-0.522449 12.538776-22.465306 27.689796-43.363265 45.453061-62.171428-6.269388-11.493878-10.44898-24.032653-12.016326-37.093878v-3.134694c0.522449-19.330612 10.44898-37.093878 26.644898-47.542857-10.971429-73.142857 9.926531-147.330612 58.514286-203.232653 49.110204-56.946939 120.163265-88.816327 194.873469-86.204081h4.702041c65.306122 0 129.567347 26.122449 177.110204 72.097959 49.110204 47.542857 76.8 112.326531 77.844898 180.767347v7.314285c0.522449 9.926531 0 19.330612-1.044898 29.257143 14.106122 8.881633 21.420408 20.37551 21.420408 48.065306 0 13.583673-1.044898 27.689796-9.926531 36.04898 13.061224 17.763265 28.734694 42.840816 41.27347 62.693877l2.612245 4.179592c20.37551 32.391837 23.510204 74.187755 22.987755 96.130613 0 17.240816-2.089796 58.514286-18.285714 70.530612-3.657143 2.612245-7.314286 3.657143-12.016327 3.657143h-4.179592c-26.122449 0-41.273469-23.510204-57.991837-48.587755l-1.567347-2.089796c-8.881633 36.571429-26.122449 71.053061-50.677551 99.265306 27.167347 9.404082 83.069388 31.346939 75.755103 73.142857-5.746939 35.526531-55.902041 62.171429-114.416327 62.171428z m-388.702041-63.738775z m250.253061-11.493878z m276.375511-140.016326z m-47.020409-235.102041z"
                fill="#7BD4EF" p-id="6227"></path>
          </svg>
          <svg @click="inDevelopment" t="1626418497652" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg"
               p-id="2103" width="35" height="35">
            <path
                d="M669.3 369.4c9.8 0 19.6 0 29.4 1.6C671 245.2 536.9 152 383.2 152 211.6 152 71 269.7 71 416.8c0 85 45.8 156.9 124.2 210.9l-31.1 93.2L273.6 667c39.2 8.2 70.3 16.3 109.5 16.3 9.8 0 19.6 0 31.1-1.6-6.5-21.3-9.8-42.5-9.8-65.4 0.1-135.7 116.2-246.9 264.9-246.9z m-168.4-85c24.5 0 39.2 16.3 39.2 39.2 0 22.9-16.3 39.2-39.2 39.2-24.5 0-47.4-16.4-47.4-39.2 0-24.5 24.6-39.2 47.4-39.2z m-216.3 73.1c-24.7 0-47.8-16.2-47.8-38.8 0-24.3 24.7-38.8 47.8-38.8s39.5 16.2 39.5 38.8c0.1 22.7-16.4 38.8-39.5 38.8z"
                fill="#24DB5A" p-id="2104"></path>
            <path
                d="M953.8 613c0-125.9-124.2-227.2-264.8-227.2-148.8 0-266.5 103-266.5 227.2 0 125.9 117.7 227.2 266.5 227.2 31.1 0 62.1-8.2 93.2-16.3l85 47.4-22.9-78.5c62.1-47.4 109.5-109.5 109.5-179.8z m-351.5-39.2c-14.7 0-31.1-14.7-31.1-31.1 0-14.7 16.3-31.1 31.1-31.1 22.9 0 39.2 16.3 39.2 31.1 0 16.4-14.7 31.1-39.2 31.1z m178-7.6c-14.8 0-31.3-14.6-31.3-30.7 0-14.6 16.5-30.7 31.3-30.7 23.1 0 39.5 16.2 39.5 30.7 0 16.2-16.4 30.7-39.5 30.7z"
                fill="#24DB5A" p-id="2105"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/component/navBar/NavBar";
import {LOGIN_CODE, routerPath} from "@/common/constant";

export default {
  name: "Login",
  components: {
    NavBar
  },
  data() {
    return {
      phone: null,
      code: null,
      errPhone: true,
      errCode: true,
      second: 60,
      interval: null,
      msgIndex: null
    }
  },
  methods: {
    detailBack() {
      this.$router.back();
    },
    sendCode() {
      this.$layer.close(this.msgIndex);
      this.second--;
      this.interval = setInterval(() => {
        this.second--;
      }, 1000);
      let number = parseInt((Math.random() * (9999 - 1000 + 1) + 1000).toString(), 10).toString();
      localStorage.setItem(LOGIN_CODE, number);
      this.$layer.msg("验证码是：" + number);
      setTimeout(() => {
        localStorage.removeItem(LOGIN_CODE);
      }, 1000 * 60 * 5);
    },
    loginSubmit() {
      if (this.errPhone || this.errCode) {
        return;
      }
      if (localStorage.getItem(LOGIN_CODE) !== this.code) {
        this.$layer.close(this.msgIndex);
        this.msgIndex = this.$layer.msg("验证码错误");
        return;
      }
      this.__loginSuccess(this.phone, this.__uuid());
      this.$router.replace(routerPath.profile);
    },
    inDevelopment() {
      this.$layer.close(this.msgIndex);
      this.msgIndex = this.$layer.msg("当前功能开发中...", {time: 1});
    }
  },
  watch: {
    phone(val) {
      if (val.length > 11) {
        return this.phone = val.slice(0, 11);
      }
      let reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/;
      this.errPhone = !reg.test(val);
    },
    code(val) {
      if (val.length > 4) {
        return this.code = val.slice(0, 4);
      }
      let reg = /\d{4}$/;
      this.errCode = !reg.test(val);
    },
    second(val) {
      if (val <= 0) {
        clearInterval(this.interval);
        this.second = 60;
      }
    }
  }
}
</script>

<style scoped>
.login {
  height: 100vh;
}

.login .content {
  padding: 10px 25px;
  height: calc(100% - 44px);
  display: flex;
  flex-direction: column;
}

.login .input-container {
  display: flex;
  align-items: center;
  margin: 15px 0;
  border-bottom: 1px solid #efefef;
}

.login .input-container label {
  display: flex;
  align-items: center;
  margin-right: 5px;
}

.login .input-container input {
  flex: 1;
}

.login .input-container input {
  border: none;
  outline: none;
  padding: 10px 0;
  width: 100%;
}

.login .verificationCode input {
  border-right: 1px solid #ccc;
}

.login .verificationCode button, .login .verificationCode span {
  width: 100px;
  border: none;
  background-color: #fff;
  color: #f13e3a;
  font-size: 14px;
  padding-left: 10px;
}

.login .verificationCode span, .login .verificationCode button[disabled] {
  color: #848689;
}

.login .button-group button {
  display: block;
  width: 100%;
  margin: 15px 0;
  padding: 10px 0;
  border: none;
  border-radius: 25px;
}

.login .button-group button:first-child {
  color: #efefef;
  background-color: #ff2000;
}

.login .button-group button:first-child[disabled] {
  background-color: #fab3b3;
}

.login .button-group button:last-child {
  color: #f13e3a;
  background-color: #fff;
  border: 1px solid #ff2000;
}

.login .text-group {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #848689;
  margin: 10px 0;
}

.login .other-group {
  border-top: 1px solid rgba(0, 0, 0, .1);
  font-size: 12px;
  margin: auto;
  width: 100%;
  text-align: center;
}

.login .other-group h4 {
  color: rgba(0, 0, 0, .2);
  width: 100px;
  margin: -9px auto 0;
  background: #fff;
}

.login .other-group .icon-group {
  margin-top: 20px;
}

.login .other-group .icon-group .icon {
  margin: 5px;
}
</style>